<template>

  <view>

    <view class="fixed-box" >

      <view style="background: linear-gradient(180deg, #FFDFE8 0%, rgba(255, 204, 218, 0) 100%);padding-top: 25px;padding-bottom: 10px;">
        <view class="tn-flex tn-flex-row-between tn-flex-col-center" style="margin: 0px 16px">
          <tn-input
            v-model="searchTvName"
            placeholder="请输入剧名"
            :border="false"
            style="width: 100%;background: white;border-radius: 30px;padding: 0 10px"
            @confirm="search"
            :maxLength="50"
          />
          <text
            class="tn-icon-search-menu tn-text-xxl tn-margin-left-xs"
            style="color: #e93d6e"
            @click="search"
          />
        </view>
      </view>
    </view>

    <u-gap height="100"></u-gap>

    <!-- Search History -->
    <view v-if="searchHistory.length > 0" class="search-history">
      <view class="history-header">
        <text>搜索历史</text>
        <text class="clear-history" @click="clearSearchHistory">清空历史</text>
      </view>
      <view class="history-list">
        <view
          v-for="(item, index) in searchHistory"
          :key="index"
          class="history-item"
        >
          <text @click="selectHistoryItem(item)">{{ item }}</text>
          <text class="delete-icon tn-icon-close" @click="deleteHistoryItem(index)"/>
        </view>
      </view>
    </view>

    <!-- Video List -->
    <view style="min-height: 800px">
      <u-gap height="50" v-if="searchHistory.length===0"/>
      <column-video-list :video-list="videoList" @followSuccess="followSuccess" />
    </view>

  </view>


</template>

<script>
import common_mixin from '@/libs/mixin/common_mixin.js'
import PrivacyPolicy from "../../components/privacy-policy/privacy-policy.vue";
import GridVideoList from "../../components/grid-video-list/grid-video-list.vue";
import ColumnVideoList from "../../components/column-video-list/column-video-list.vue";
import Config from "../../utils/config";
import UGap from "../../uni_modules/uview-ui/components/u-gap/u-gap.vue";
import TnInput from "../../uni_modules/tuniao-ui/components/tn-input/tn-input.vue";
import {getStorageSync, setStorageSync} from "../../utils/utils";

export default {
  components: {TnInput, UGap, ColumnVideoList, GridVideoList, PrivacyPolicy},
  mixins: [common_mixin],
  name: "index",
  isWechat:Config.isWeChat,
  data() {
    return {
      videoList:[],
      page:1,

      searchTvName:'',
      searchHistory: []
    }
  },
  onLoad(options) {
    if (options.searchTvName) {
      this.searchTvName = options.searchTvName
    }
  },
  onShow(){
    this.loadSearchHistory();
    this.search();
  },
  methods:{
    search(){
      this.page=1;
      if(this.searchTvName) {
        this.addSearchHistory(this.searchTvName)
      }
      this.getTvList();
    },
    followSuccess(index) {
      this.videoList[index].is_follow=true
    },
    async getTvList() {
      let params = {
        page:this.page,
        searchTvName:this.searchTvName,
        cateId: '',
		    limit:10
      }
      let res = await this.$api.getTvList(params)
      this.videoList = res.data
    },
    async loadSearchHistory() {
      console.log()
      let xx = getStorageSync('searchHistory');
      let history= [];
      if(xx) {
        history = JSON.parse(xx);
      }
      this.searchHistory = history;
    },
    async saveSearchHistory() {
      setStorageSync("searchHistory", JSON.stringify(this.searchHistory));
    },
    async addSearchHistory(term) {
      console.log(term);
      const index = this.searchHistory.indexOf(term);
      if (index !== -1) {
        this.searchHistory.splice(index, 1); // Remove existing term
      }
      this.searchHistory.unshift(term); // Add to the top
      if (this.searchHistory.length > 10) {
        this.searchHistory.pop(); // Remove the oldest term
      }
      this.saveSearchHistory();
    },
    async selectHistoryItem(item) {
      this.searchTvName = item;
      this.search();
    },
    async deleteHistoryItem(index) {
      this.searchHistory.splice(index, 1);
      this.saveSearchHistory();
    },
    async clearSearchHistory() {
      this.searchHistory = [];
      localStorage.removeItem('searchHistory');
    }
  },
  async onReachBottom() {
    console.log('页面触底了');
    let params = {
      page:this.page+1,
      searchTvName:this.searchTvName,
      cateId: '',
      limit:10
    }
    let res = await this.$api.getTvList(params)
    if(res.data.length>0){
      this.videoList = this.videoList.concat(res.data);
      this.page++;
    }
  },

}
</script>

<style scoped lang="scss">
.fixed-box{
  position: fixed;
  width: 100%;
  background: white;
  z-index: 99;
}
//.fixed-box{
//  position: fixed;
//  width: 100%;
//  top: 40px;
//  background: white;
//  z-index: 99;
//}
.search-history {
  padding: 16px;
  background: #f8f8f8;
  border-radius: 10px;
  margin: 26px 16px;

  .history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    .clear-history {
      color: #e93d6e;
      cursor: pointer;
    }
  }

  .history-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    .history-item {
      display: flex;
      align-items: center;
      background: #e0e0e0;
      padding: 8px 12px;
      border-radius: 20px;
      font-size: 14px;
      color: #333;

      .delete-icon {
        margin-left: 8px;
        cursor: pointer;
        color: #888;
      }
    }
  }
}

</style>
